<template>
  <div ref="editor">
   <mavon-editor
      :subfield = "subfield"
      :scrollStyle="true"
       @save="save"
      :editable="editable"
      :defaultOpen="defaultOpen"     
      :ishljs="true" 
      :toolbarsFlag="toolbarsFlag"
      :external-link="external_link"
      v-model="d_value"
      ></mavon-editor>
  </div>
</template>
<script>
export default {
  name: "Markdown",
  props: {
    // 初始value
    value: {
      type: String,
      default: ""
    },
    preview: {
      type: Boolean,
      default: false
    },
    height: {
      type: String,
      default: ""
    },
    editable: {
      type: Boolean,
      default: true
    }
  },
  created() {
    this.d_value = this.value;
    //console.log(this.preview)
    this.render();
  },
  mounted() {
    let el = this.$refs.editor.querySelector(".v-note-panel");
    if (this.height) {
      el.style.height = this.height;
    }
  },
  watch: {
    preview: function(val, oldVal) {
      let $vm = this;
      $vm.render();
    },
    d_value: function(val, oldVal) {
      let $vm = this;
      // v-model 语法糖
      $vm.$emit("input", $vm.d_value);
    },
    value: function(val, oldVal) {
      // console.log("ss9988");
      if (val !== this.d_value) {
        this.d_value = val;
        let $vm = this;
      }
    }
  },
  methods: {
    render() {
      if (this.preview) {
        this.subfield = false;
        this.defaultOpen = "preview";
        this.toolbarsFlag = false;
      } else {
        this.subfield = true;
        this.defaultOpen = "";
        this.toolbarsFlag = true;
      }
    },
    save() {
      console.log("sss");
      this.$emit("save");
    }
  },
  data() {
    return {
      d_value: "",
      subfield: true, //true： 双栏(编辑预览同屏)， false： 单栏(编辑预览分屏)
      // code_style: "solarized-dark",
      toolbarsFlag: true,
      defaultOpen: "",
      external_link: {
        markdown_css: function() {
          // 这是你的markdown css文件路径


          if (process.env.NODE_ENV == 'production') {
            return "https://cdn.bootcss.com/github-markdown-css/2.10.0/github-markdown.css";
          }
          return "/static/js/markdown/github-markdown.min.css";
        },
        hljs_js: function() {
          // 这是你的hljs文件路径
          if (process.env.NODE_ENV == 'production') {
            return "https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js";
          }
          return "/static/js/highlightjs/highlight.min.js";
        },
        hljs_css: function(css) {
          // 这是你的代码高亮配色文件路径
          if (process.env.NODE_ENV == 'production') {
            return (
              "https://cdn.bootcss.com/highlight.js/9.12.0/styles/" +
              css +
              ".min.css"
            );
          }
          return "/static/js/highlightjs/styles/" + css + ".min.css";
        },
        hljs_lang: function(lang) {
          // 这是你的代码高亮语言解析路径
          if (process.env.NODE_ENV == 'production') {
            return (
              "https://cdn.bootcss.com/highlight.js/9.12.0/languages/" +
              css +
              ".min.js"
            );
          }
          return "/static/js/highlightjs/languages/" + lang + ".min.js";
        },
        katex_css: function() {
          // 这是你的katex配色方案路径路径
          if (process.env.NODE_ENV == 'production') {
            return "https://cdn.bootcss.com/KaTeX/0.9.0/katex.min.css";
          }
          return "/static/js/katex/katex.min.css";
        },
        katex_js: function() {
          // 这是你的katex.js路径
          if (process.env.NODE_ENV == 'production') {
            return "https://cdn.bootcss.com/KaTeX/0.9.0/katex.min.js";
          }
          return "/static/js/katex/katex.min.js";
        }
      }
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
<style>
.v-note-panel {
  overflow: auto;
  height: 60%;
}
</style>

